<template>
  <div class="container">
    <!-- <uv-navbar :autoBack="true" :placeholder="true" bg-color="transparent" :title="title"></uv-navbar> -->
    <view @click="focus=true">
      <uv-textarea @blur="focus=false" @focus="focus=true" :focus="focus" :height="textareaHeight" :customStyle="customStyle" @linechange="linechange" v-model="model.describe" autoHeight border="none" placeholder="请输入内容"></uv-textarea>
    </view>
    <uploader v-model="imgs" ruquest="savePhoto" :maxCount="9" valType="arrJson"></uploader>
    <view class="actionBtn" @click="save">
      <uv-button text="保 存" color="#9E06FF" shape="circle" :loading="loading"></uv-button>
    </view>

    <view class="howToWrite">
      <view class="bold fz12">不知道怎么写？看看大家怎么说</view>
      <view class="content fz12">
        {{desc_format}}
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import uploader from "@/components/uv/uploader.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let title = ref("");
let model = ref({
  type: "",
  describe: "",
  pictureIds: "",
});
let focus = ref(false);
let imgs = ref([]);
let textareaHeight = ref(120);
let loading = ref(false);

let customStyle = computed(() => {
  return {
    height: `${textareaHeight.value}px`,
  };
});

let descList = computed(() => {
  return [
    {
      type: "1",
      content: `自我描述：

  性格:我是一个温暖而真诚的人，愿意倾听他人的故事并给予支持。我相信真诚是人际关系的基石，喜欢在朋友需要时伸出援手。

  生活习惯:我喜欢规律的生活，每天晨跑让我精力充沛。晚上，我通过阅读或观影来放松心情，保持身心平衡。

  优点:耐心且善解人意，懂得倾听，理解他人。

  缺点:有时过于害羞，表达情感不够直接。希望你能让我大胆一点`,
    },
    {
      type: "2",
      content: `爱情观：

  期待的爱情:我期待的爱情是相互尊重、信任和支持。我希望与伴侣共同成长，分享生活的点点滴滴。

  对爱情的看法:我认为爱情是生活中最美好的礼物它需要双方的努力和沟通来维系。真诚和忠诚是长久关系的基石。`,
    },
    {
      type: "3",
      content: `家庭背景：

  父母:父亲是工程师，母亲是教师，他们的勤奋和正直对我影响深远。

  兄弟姐妹:有个哥哥，在老家，已经结婚了
  
  生长环境:在宁静的小城长大，家庭温暖，父母鼓励独立，培养了我坚韧和适应力。`,
    },
    {
      type: "4",
      content: `兴趣爱好：

  兴趣爱好:我热衷于音乐和烹饪。业余时间，我会弹吉他，尝试制作各种美食，享受创造过程。

  周末干什么:周末我通常参加瑜伽课程，或者去附近的艺术画廊，寻找灵感。`,
    },
    {
      type: "6",
      content: `理想的另一半：

  硬件条件:我希望TA有稳定的工作，能够独立生活，同时我们都能欣赏彼此的外貌，相互吸引。

  人品和三观:我希望 TA是一个诚实、有同情心的人，我们有着相似的价值观，比如重视家庭和个人成长

  生活习惯:我希望我们都有健康的生活方式，比如定期锻炼和均衡饮食。同时，我们能共享一些共同的爱好，比如旅行和阅读。

  情感和关系:在情感上，我希望我们能够开放沟通相互支持。在关系中，我期待我们能够平等对待彼此，共同面对生活的挑战。`,
    },
  ];
});

let desc_format = computed(() => {
  for (let index = 0; index < descList.value.length; index++) {
    const element = descList.value[index];
    if (element.type == model.value.type.toString()) {
      return descList.value[index].content;
    }
  }
});

onLoad((e) => {
  title.value = e.title;
  model.value.type = e.type;
  uni.setNavigationBarTitle({
    title: e.title,
  });

  getInfo();
});

async function getInfo() {
  imgs.value = [];
  let ret = await proxy.$apis.queryInfo({
    userId: counter.slParams.userId,
  });
  let index = proxy.$utils.findIndexByField(
    ret,
    "type",
    Number(model.value.type)
  );
  if (index == -1) return;
  model.value = proxy.$utils.formatFunction(ret[index], {
    ...model.value,
  });
  model.value.describe = ret[index].tbDescribe;
  if (model.value.pictureIds) {
    let arr = model.value.pictureIds.split(",");
    arr = arr.filter((item) => item.trim() !== "");
    arr.forEach((element, current: Number) => {
      imgs.value.push({
        pictureUrl: ret[index].pictureUrls[current],
        id: arr[current],
      });
    });
  }
}

function linechange(e) {
  if (e.detail.height > textareaHeight.value)
    textareaHeight.value = e.detail.height;
}

async function save() {
  try {
    loading.value = true;
    await proxy.$apis.saveInfo(model.value);
    proxy.$utils.showToast("保存成功");
    getInfo();
    proxy.$utils.back();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

watch(
  () => imgs.value,
  (newValue, oldValue) => {
    if (newValue) {
      let arr = [];
      newValue.forEach((item) => {
        arr.push(item.id);
      });
      model.value.pictureIds = arr.toString();
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
  // min-height: 100vh;
  // background-image: url("/static/img/tabber5BgImage.png");
  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: center;
  padding: 0 15px 25px;
  .uv-textarea {
    background-color: transparent;
  }
  .actionBtn {
    width: 217px;
    margin: 65px auto 0;
  }
  .howToWrite {
    margin-top: 78px;
    .content {
      padding: 15px 10px;
      background-color: #fafafa;
      border-radius: 8px;
      color: #999999;
      margin-top: 9px;
      white-space: pre-wrap;
    }
  }
}
</style>






